<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>柱状统计图</title>
</head>
<script>
window.onload=function(){
		var huabu=document.getElementById('canvas');
	var hua=huabu.getContext('2d');
	
	function draw(){
		hua.beginPath();
		hua.fillStyle='yellow';
		hua.fillRect(0,0,1000,1000);
		hua.closePath();//----统计图背景颜色为黄色----------
		
		hua.beginPath();
		hua.lineWidth=5;
		hua.strokeStyle='black';
		hua.fillStyle='black';
		hua.moveTo(100,900);
		hua.lineTo(900,900);
		hua.lineTo(900,910);
		hua.lineTo(920,900);
		hua.lineTo(900,890);
		hua.lineTo(900,900);//X轴箭头
		hua.lineTo(100,900);
		hua.lineTo(100,100);
		hua.lineTo(110,100);
		hua.lineTo(100,80);
		hua.lineTo(90,100);
		hua.lineTo(100,100);//Y轴箭头
		hua.stroke();
		hua.fill();
		hua.closePath();//------以上为X和Y轴线-------------
		
		function yline(){
			for(var i=1;i<8;i++){
				hua.beginPath();
				hua.moveTo(100,900-i*100);
				hua.lineTo(130,900-i*100);
				hua.font='20px Arial';
				hua.fillText(i*100,60,900-i*100);
				
				hua.stroke();
				hua.closePath();
				}
			}
		 yline()	//Y轴刻度
		 
		 
		 //------------以下为柱状图------------------------------
		 var number=[{id:1,num:350},{id:2,num:200},{id:3,num:500},{id:4,num:300},{id:5,num:400},{id:6,num:600},{id:7,num:450}]
		 main(number)
		 
		 
		 function main(obj){
			 var num=obj.length;
			
			 function fn(a,b){
				 this.num=0;
				 this.a=a;
				 this.b=b;
				 var _this=this;
				 this.timer=setInterval(function(){
					_this.num+=2;
					 hua.beginPath();
					 hua.lineWidth=50;
					 hua.strokeStyle='red';
					 hua.moveTo(100+_this.a*100,900);
					 hua.lineTo(100+_this.a*100,900-_this.num)
					 hua.stroke();
					 hua.closePath();
					 if(_this.num>=_this.b){clearInterval(_this.timer)}
					 },1)
				 }
				 var arr=[]
				for(var i=0;i<num;i++){
					arr[i]=new fn(obj[i].id,obj[i].num)
					}
				 
				 
			 
			 }
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		
		}
	draw()
		
		
}
	
</script>
<body>
<canvas id="canvas" width="1000" height="1000"></canvas>
</body>
</html>
